<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 连接测试工具</title>
    <link rel="stylesheet" href="../json/styles.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* WebSocket工具特定样式 */
        .websocket-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .connection-section {
            background-color: var(--card-background);
            border-radius: 8px;
            box-shadow: 0 4px 6px var(--shadow-color);
            padding: 20px;
        }
        
        .connection-section h2,
        .message-section h2,
        .response-section h2 {
            margin-bottom: 20px;
        }
        
        .url-section {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            align-items: center;
        }
        
        .url-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: var(--card-background);
            color: var(--text-color);
            font-size: 14px;
        }
        
        .connect-btn {
            padding: 8px 20px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            min-width: 80px;
        }
        
        .connect-btn:hover {
            background-color: var(--secondary-color);
        }
        
        .connect-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        .connect-btn.connected {
            background-color: var(--error-color);
        }
        
        .connect-btn.connected:hover {
            background-color: #d32f2f;
        }
        
        .connection-status {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 4px;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .status-disconnected {
            background-color: rgba(244, 67, 54, 0.1);
            color: var(--error-color);
            border: 1px solid rgba(244, 67, 54, 0.3);
        }
        
        .status-connected {
            background-color: rgba(76, 175, 80, 0.1);
            color: var(--success-color);
            border: 1px solid rgba(76, 175, 80, 0.3);
        }
        
        .status-connecting {
            background-color: rgba(255, 193, 7, 0.1);
            color: var(--warning-color);
            border: 1px solid rgba(255, 193, 7, 0.3);
        }
        
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: currentColor;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 15px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
            color: var(--text-color);
        }
        
        .tab.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .params-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .params-table th,
        .params-table td {
            padding: 8px;
            border: 1px solid var(--border-color);
            text-align: left;
        }
        
        .params-table th {
            background-color: var(--background-color);
            font-weight: bold;
        }
        
        .params-table input {
            width: 100%;
            padding: 4px 8px;
            border: none;
            background: transparent;
            color: var(--text-color);
        }
        
        .params-table input:focus {
            outline: 1px solid var(--primary-color);
        }
        
        .add-param-btn {
            margin-top: 10px;
            padding: 6px 12px;
            background-color: var(--success-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .remove-param-btn {
            background-color: var(--error-color);
            color: white;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            padding: 2px 6px;
            font-size: 12px;
        }
        
        .message-section {
            background-color: var(--card-background);
            border-radius: 8px;
            box-shadow: 0 4px 6px var(--shadow-color);
            padding: 20px;
        }
        
        .message-input-section {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .message-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: var(--card-background);
            color: var(--text-color);
            font-size: 14px;
            min-height: 80px;
            resize: vertical;
            font-family: 'Consolas', monospace;
        }
        
        .send-btn {
            padding: 8px 20px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            align-self: flex-start;
        }
        
        .send-btn:hover {
            background-color: var(--secondary-color);
        }
        
        .send-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        .response-section {
            background-color: var(--card-background);
            border-radius: 8px;
            box-shadow: 0 4px 6px var(--shadow-color);
            padding: 20px;
        }
        
        .response-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .message-filter {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .filter-select {
            padding: 4px 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: var(--card-background);
            color: var(--text-color);
            font-size: 12px;
        }
        
        .clear-btn {
            padding: 4px 8px;
            background-color: var(--warning-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .messages-container {
            border: 1px solid var(--border-color);
            border-radius: 4px;
            max-height: 400px;
            overflow-y: auto;
            background-color: var(--background-color);
        }
        
        .message-item {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border-color);
            font-family: 'Consolas', monospace;
            font-size: 12px;
        }
        
        .message-item:last-child {
            border-bottom: none;
        }
        
        .message-sent {
            background-color: rgba(33, 150, 243, 0.1);
            border-left: 3px solid var(--primary-color);
        }
        
        .message-received {
            background-color: rgba(76, 175, 80, 0.1);
            border-left: 3px solid var(--success-color);
        }
        
        .message-error {
            background-color: rgba(244, 67, 54, 0.1);
            border-left: 3px solid var(--error-color);
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
            font-size: 11px;
            opacity: 0.7;
        }
        
        .message-type {
            font-weight: bold;
            text-transform: uppercase;
        }
        
        .message-time {
            color: var(--text-color);
        }
        
        .message-content {
            white-space: pre-wrap;
            word-wrap: break-word;
            color: var(--text-color);
        }
        
        .loading {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--primary-color);
        }
        
        .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border-color);
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="header-left">
                <div class="logo">
                    <span><a href="https://geekdaxue.co/" target="_blank"><img src="https://geekdaxue.co/static/images/logo_platypus.png" height="30px"></a></span>
                </div>
                <nav class="main-navigation">
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            JSON工具 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="../json/index.html">JSON 格式化</a>
                            <a href="../json/parser.html">JSON 格式校验</a>
                            <a href="../json/excel.html">JSON 转 Excel/CSV</a>
                            <a href="../json/jsonxml.html">JSON 与 XML 转换</a>
                            <a href="../json/editor.html">JSON 编辑器</a>
                        </div>
                    </div>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            编码转换 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="../coding/base64.html">Base64 编码</a>
                            <a href="../coding/urlencoding.html">URL 编码</a>
                            <a href="../coding/md5.html">MD5 加密</a>
                            <a href="../coding/unicode.html">Unicode 转换</a>
                            <a href="../coding/hex_convert.html">进制转换</a>
                        </div>
                    </div>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            文本工具 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="../txt/diff.html">文本对比</a>
                            <a href="../txt/replace.html">文本替换</a>
                            <a href="../txt/remove.html">空白行移除</a>
                            <a href="../txt/cn_trans.html">繁简体转换</a>
                        </div>
                    </div>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            图片工具 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="../img/2svg.html">图片转 SVG</a>
                            <a href="../img/qr_code.html">二维码生成</a>
                            <a href="../img/barcode.html">条形码生成</a>
                        </div>
                    </div>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            网络工具 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="http.html">HTTP 请求测试</a>
                            <a href="websocket.html">WebSocket 测试</a>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="header-controls">
                <div class="theme-toggle">
                    <input type="checkbox" id="theme-switch" class="theme-switch">
                    <label for="theme-switch" class="theme-switch-label">
                        <i class="fas fa-sun"></i>
                        <i class="fas fa-moon"></i>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="share-button" id="share-button" title="分享给朋友">
                    <i class="fas fa-share-alt"></i>
                    <span>分享</span>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <div id="privacy-notice" class="privacy-notice">
            <div class="privacy-notice-content">
                <i class="fas fa-shield-alt"></i>
                <p>安全提示：您的数据仅在本地浏览器中处理，不会上传到服务器，请放心使用！</p>
                <button id="close-notice" class="close-notice" title="关闭提示">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        
        <main>
            <div class="websocket-container">
                <!-- 连接配置区域 -->
                <div class="connection-section">
                    <h2>WebSocket 连接配置</h2>
                    
                    <!-- 连接状态 -->
                    <div id="connection-status" class="connection-status status-disconnected">
                        <div class="status-indicator"></div>
                        <span id="status-text">未连接到 WebSocket 服务器</span>
                    </div>
                    
                    <!-- URL 和连接按钮 -->
                    <div class="url-section">
                        <input type="text" id="url-input" class="url-input" placeholder="请输入 WebSocket URL" value="">
                        <button id="connect-btn" class="connect-btn">
                            <i class="fas fa-plug"></i> 连接
                        </button>
                    </div>
                    
                    <!-- 参数配置标签页 -->
                    <div class="tabs">
                        <div class="tab active" data-tab="params">
                            <i class="fas fa-list"></i> Query Params
                        </div>
                        <div class="tab" data-tab="headers">
                            <i class="fas fa-tags"></i> Headers
                        </div>
                        <div class="tab" data-tab="settings">
                            <i class="fas fa-cog"></i> Settings
                        </div>
                    </div>
                    
                    <!-- Query Parameters -->
                    <div id="params-content" class="tab-content active">
                        <table class="params-table" id="params-table">
                            <thead>
                                <tr>
                                    <th style="width: 40%">Key</th>
                                    <th style="width: 40%">Value</th>
                                    <th style="width: 15%">Description</th>
                                    <th style="width: 5%">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="text" placeholder="Key"></td>
                                    <td><input type="text" placeholder="Value"></td>
                                    <td><input type="text" placeholder="Description"></td>
                                    <td><button class="remove-param-btn" onclick="removeParamRow(this)">×</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <button class="add-param-btn" onclick="addParamRow()">+ 添加参数</button>
                    </div>
                    
                    <!-- Headers -->
                    <div id="headers-content" class="tab-content">
                        <table class="params-table" id="headers-table">
                            <thead>
                                <tr>
                                    <th style="width: 40%">Key</th>
                                    <th style="width: 40%">Value</th>
                                    <th style="width: 15%">Description</th>
                                    <th style="width: 5%">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="text" placeholder="Key"></td>
                                    <td><input type="text" placeholder="Value"></td>
                                    <td><input type="text" placeholder="Description"></td>
                                    <td><button class="remove-param-btn" onclick="removeHeaderRow(this)">×</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <button class="add-param-btn" onclick="addHeaderRow()">+ 添加 Header</button>
                    </div>
                    
                    <!-- Settings -->
                    <div id="settings-content" class="tab-content">
                        <p style="color: var(--text-color); opacity: 0.7;">连接设置功能开发中...</p>
                    </div>
                </div>
                
                <!-- 消息发送区域 -->
                <div class="message-section">
                    <h2>发送消息</h2>
                    
                    <div class="message-input-section">
                        <textarea id="message-input" class="message-input" placeholder='请输入要发送的消息内容'></textarea>
                        <button id="send-btn" class="send-btn" disabled>
                            <i class="fas fa-paper-plane"></i> 发送
                        </button>
                    </div>
                </div>
                
                <!-- 响应结果区域 -->
                <div class="response-section">
                    <h2>消息记录</h2>
                    
                    <div class="response-controls">
                        <div class="message-filter">
                            <label>筛选：</label>
                            <select id="message-filter" class="filter-select">
                                <option value="all">全部消息</option>
                                <option value="sent">已发送</option>
                                <option value="received">已接收</option>
                                <option value="error">错误</option>
                            </select>
                        </div>
                        <button id="clear-messages" class="clear-btn">
                            <i class="fas fa-trash"></i> 清空
                        </button>
                    </div>
                    
                    <div id="messages-container" class="messages-container">
                        <div class="message-item message-error">
                            <div class="message-header">
                                <span class="message-type">系统</span>
                                <span class="message-time">等待连接...</span>
                            </div>
                            <div class="message-content">请先连接到 WebSocket 服务器</div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <footer>
            <div class="footer-container">
                <div class="footer-main">
                    <div class="footer-section about-us">
                        <h3>关于我们</h3>
                        <p>我们提供一系列高效、便捷的在线工具，帮助开发者、非技术人员提高工作效率，解决日常开发中遇到的各种问题。</p>
                        <p>Build With <i class="fa-solid fa-heart" style="color: red;"></i> For SF.</p>
                    </div>
                    <div class="footer-section links">
                        <h3>工具导航</h3>
                        <div class="links-columns">
                            <ul>
                                <li><a href="../json/index.html">JSON 工具</a></li>
                                <li><a href="../img/index.html">图片处理</a></li>
                                <li><a href="#">开发工具</a></li>
                            </ul>
                            <ul>
                                <li><a href="../coding/index.html">编码转换</a></li>
                                <li><a href="../txt/index.html">文本工具</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="footer-section contact">
                        <h3>联系我们</h3>
                        <div class="social-icons">
                            <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
                            <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                            <a href="#" title="WeChat"><i class="fab fa-weixin"></i></a>
                            <a href="mailto:example@example.com" title="Email"><i class="fas fa-envelope"></i></a>
                        </div>
                        <p>如有问题或建议，请随时联系我们</p>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="footer-legal">
                        <a href="#">使用条款</a>
                        <a href="#">隐私政策</a>
                    </div>
                </div>
            </div>
        </footer>
    
    <script src="../json/script.js"></script>
    <script>
        let websocket = null;
        let isConnected = false;
        let messageCount = 0;
        
        // DOM 元素
        const urlInput = document.getElementById('url-input');
        const connectBtn = document.getElementById('connect-btn');
        const connectionStatus = document.getElementById('connection-status');
        const statusText = document.getElementById('status-text');
        const messageInput = document.getElementById('message-input');
        const sendBtn = document.getElementById('send-btn');
        const messagesContainer = document.getElementById('messages-container');
        const messageFilter = document.getElementById('message-filter');
        const clearMessagesBtn = document.getElementById('clear-messages');
        
        // 连接 WebSocket
        function connectWebSocket() {
            const url = urlInput.value.trim();
            if (!url) {
                addMessage('error', '请输入有效的 WebSocket URL');
                return;
            }
            
            if (isConnected) {
                disconnectWebSocket();
                return;
            }
            
            try {
                // 更新状态为连接中
                updateConnectionStatus('connecting', `正在连接到 ${url}`);
                connectBtn.disabled = true;
                
                // 构建完整的 URL（包含参数）
                const fullUrl = buildUrlWithParams(url);
                
                // 创建 WebSocket 连接
                websocket = new WebSocket(fullUrl);
                
                websocket.onopen = function(event) {
                    isConnected = true;
                    updateConnectionStatus('connected', `已连接到 ${url}`);
                    connectBtn.textContent = '断开';
                    connectBtn.classList.add('connected');
                    connectBtn.disabled = false;
                    sendBtn.disabled = false;
                    addMessage('received', '连接成功', 'WebSocket 连接已建立');
                };
                
                websocket.onmessage = function(event) {
                    addMessage('received', '接收消息', event.data);
                };
                
                websocket.onclose = function(event) {
                    isConnected = false;
                    updateConnectionStatus('disconnected', `未连接到 ${url}`);
                    connectBtn.innerHTML = '<i class="fas fa-plug"></i> 连接';
                    connectBtn.classList.remove('connected');
                    connectBtn.disabled = false;
                    sendBtn.disabled = true;
                    
                    if (event.wasClean) {
                        addMessage('received', '连接关闭', `连接已正常关闭 (code=${event.code})`);
                    } else {
                        addMessage('error', '连接断开', `连接意外断开 (code=${event.code})`);
                    }
                };
                
                websocket.onerror = function(error) {
                    addMessage('error', '连接错误', '无法连接到 WebSocket 服务器');
                    connectBtn.disabled = false;
                };
                
            } catch (error) {
                addMessage('error', '连接失败', error.message);
                updateConnectionStatus('disconnected', `未连接到 ${url}`);
                connectBtn.disabled = false;
            }
        }
        
        // 断开 WebSocket 连接
        function disconnectWebSocket() {
            if (websocket) {
                websocket.close();
                websocket = null;
            }
        }
        
        // 发送消息
        function sendMessage() {
            if (!isConnected || !websocket) {
                addMessage('error', '发送失败', '请先连接到 WebSocket 服务器');
                return;
            }
            
            const message = messageInput.value.trim();
            if (!message) {
                addMessage('error', '发送失败', '消息内容不能为空');
                return;
            }
            
            try {
                websocket.send(message);
                addMessage('sent', '发送消息', message);
            } catch (error) {
                addMessage('error', '发送失败', error.message);
            }
        }
        
        // 构建带参数的 URL
        function buildUrlWithParams(baseUrl) {
            const params = getParams();
            if (params.length === 0) {
                return baseUrl;
            }
            
            const url = new URL(baseUrl);
            params.forEach(param => {
                if (param.key && param.value) {
                    url.searchParams.append(param.key, param.value);
                }
            });
            
            return url.toString();
        }
        
        // 获取参数
        function getParams() {
            const params = [];
            const rows = document.querySelectorAll('#params-table tbody tr');
            
            rows.forEach(row => {
                const inputs = row.querySelectorAll('input');
                const key = inputs[0].value.trim();
                const value = inputs[1].value.trim();
                const description = inputs[2].value.trim();
                
                if (key || value) {
                    params.push({ key, value, description });
                }
            });
            
            return params;
        }
        
        // 更新连接状态
        function updateConnectionStatus(status, text) {
            connectionStatus.className = `connection-status status-${status}`;
            statusText.textContent = text;
        }
        
        // 添加消息到记录
        function addMessage(type, title, content) {
            messageCount++;
            const messageDiv = document.createElement('div');
            messageDiv.className = `message-item message-${type}`;
            messageDiv.dataset.type = type;
            
            const now = new Date();
            const timeString = now.toLocaleTimeString();
            
            messageDiv.innerHTML = `
                <div class="message-header">
                    <span class="message-type">${title}</span>
                    <span class="message-time">${timeString}</span>
                </div>
                <div class="message-content">${content}</div>
            `;
            
            // 将新消息插入到顶部
            messagesContainer.insertBefore(messageDiv, messagesContainer.firstChild);
            
            // 应用当前筛选
            applyMessageFilter();
        }
        
        // 应用消息筛选
        function applyMessageFilter() {
            const filterValue = messageFilter.value;
            const messages = messagesContainer.querySelectorAll('.message-item');
            
            messages.forEach(message => {
                if (filterValue === 'all' || message.dataset.type === filterValue) {
                    message.style.display = 'block';
                } else {
                    message.style.display = 'none';
                }
            });
        }
        
        // 清空消息记录
        function clearMessages() {
            messagesContainer.innerHTML = '';
            messageCount = 0;
            addMessage('received', '系统', '消息记录已清空');
        }
        
        // 添加参数行
        function addParamRow() {
            const tbody = document.querySelector('#params-table tbody');
            const row = document.createElement('tr');
            row.innerHTML = `
                <td><input type="text" placeholder="Key"></td>
                <td><input type="text" placeholder="Value"></td>
                <td><input type="text" placeholder="Description"></td>
                <td><button class="remove-param-btn" onclick="removeParamRow(this)">×</button></td>
            `;
            tbody.appendChild(row);
        }
        
        // 删除参数行
        function removeParamRow(btn) {
            const row = btn.closest('tr');
            const tbody = row.parentElement;
            if (tbody.children.length > 1) {
                row.remove();
            }
        }
        
        // 添加 Header 行
        function addHeaderRow() {
            const tbody = document.querySelector('#headers-table tbody');
            const row = document.createElement('tr');
            row.innerHTML = `
                <td><input type="text" placeholder="Key"></td>
                <td><input type="text" placeholder="Value"></td>
                <td><input type="text" placeholder="Description"></td>
                <td><button class="remove-param-btn" onclick="removeHeaderRow(this)">×</button></td>
            `;
            tbody.appendChild(row);
        }
        
        // 删除 Header 行
        function removeHeaderRow(btn) {
            const row = btn.closest('tr');
            const tbody = row.parentElement;
            if (tbody.children.length > 1) {
                row.remove();
            }
        }
        
        // 标签页切换
        function initTabs() {
            const tabs = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const targetTab = tab.dataset.tab;
                    
                    // 移除所有活动状态
                    tabs.forEach(t => t.classList.remove('active'));
                    tabContents.forEach(tc => tc.classList.remove('active'));
                    
                    // 添加活动状态
                    tab.classList.add('active');
                    const targetContent = document.getElementById(targetTab + '-content');
                    if (targetContent) {
                        targetContent.classList.add('active');
                    }
                });
            });
        }
        
        // 事件监听器
        connectBtn.addEventListener('click', connectWebSocket);
        sendBtn.addEventListener('click', sendMessage);
        messageFilter.addEventListener('change', applyMessageFilter);
        clearMessagesBtn.addEventListener('click', clearMessages);
        
        // 回车发送消息
        messageInput.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'Enter') {
                sendMessage();
            }
        });
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            initTabs();
            
            // 清空初始消息
            setTimeout(() => {
                messagesContainer.innerHTML = '';
                addMessage('received', '系统', '请先连接到 WebSocket 服务器');
            }, 100);
        });
        
        // 页面卸载时关闭连接
        window.addEventListener('beforeunload', () => {
            if (websocket) {
                websocket.close();
            }
        });
        
        // 百度统计
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?3615c6485313357fe26e486bf42d9ec2";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>
</html>